<template>

  <el-dialog title="设置后台权限" v-model="dialogVisible" width="500px" :before-close="handleClose" class="common-dialog">

    <div class="permission-container">

      <div class="permission-options">
        <div class="option-item">查看</div>
        <div class="option-item">管理</div>
      </div>

      <div class="tree-wrapper">

        <el-tree v-if="treeData.length > 0" style="max-width: 600px" :data="treeData" :render-after-expand="false"
          default-expand-all :expand-on-click-node="false">

          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <div class="node-content">
                <div class="node-label">
                  <span>{{ node.label }}</span>
                </div>

                <div class="node-permissions">

                  <template v-if="data.children && data.children.length > 0">
                    <el-checkbox v-model="data.permissions.view" :indeterminate="data.viewIndeterminate"
                      @change="(val) => handleParentCheckboxChange(data, 'view', val)"></el-checkbox>
                    <el-checkbox v-model="data.permissions.manage" :indeterminate="data.manageIndeterminate"
                      :disabled="data.isViewOnly"
                      @change="(val) => handleParentCheckboxChange(data, 'manage', val)"></el-checkbox>
                  </template>

                  <template v-else>
                    <el-checkbox v-model="data.permissions.view"
                      @change="(val) => handleCheckboxChange(data, 'view', val)"></el-checkbox>
                    <el-checkbox v-model="data.permissions.manage" :disabled="data.isViewOnly"
                      @change="(val) => handleCheckboxChange(data, 'manage', val)"></el-checkbox>
                  </template>

                </div>

              </div>
            </div>
          </template>

        </el-tree>

        <div v-else class="tree-loading">加载中...</div>
      </div>

      <div class="common-group-button" style="margin: 10px 0">
        <el-button class="confirm-button" type="primary" @click="confirmEdit">确认</el-button>
        <el-button style=" color: #ff4242;
      border-color: #ff4242;" class="cancel-button" @click="handleClose">删除</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { getAccessRight } from "@/apis/accessGroup";
import { nextTick, onMounted, ref, watch } from "vue";
const emits = defineEmits(["update:permissions", "close"]);
const treeData = ref([]);

const dialogVisible = ref(false);

const getAccessTreeData = () => {
  // 检查是否有原始权限数据
  if (
    originalRightData.value &&
    ((originalRightData.value.parentRoleRightViewGroupList &&
      originalRightData.value.parentRoleRightViewGroupList.length > 0) ||
      (originalRightData.value.roleRightViewGroupList &&
        originalRightData.value.roleRightViewGroupList.length > 0))
  ) {
    // 优先使用parentRoleRightViewGroupList构建树
    let dataForTreeBuild = [];

    if (
      originalRightData.value.parentRoleRightViewGroupList &&
      originalRightData.value.parentRoleRightViewGroupList.length > 0
    ) {

      dataForTreeBuild = [...originalRightData.value.parentRoleRightViewGroupList];
    } else if (
      originalRightData.value.roleRightViewGroupList &&
      originalRightData.value.roleRightViewGroupList.length > 0
    ) {

      dataForTreeBuild = [...originalRightData.value.roleRightViewGroupList];
    }

    // 处理数据
    dataForTreeBuild.forEach((item: any) => {
      item.label = item.groupName;
      item.value = item.accessRightDefaultId;
    });

    // 构建树
    const treeResult = buildTree(dataForTreeBuild);
    treeData.value = treeResult;

    return Promise.resolve(treeData.value);
  }

  // 如果没有原始权限数据，则从API获取
  return new Promise((resolve, reject) => {
    getAccessRight({
      accessGroupId: 0,
      parentId: 1,
    })
      .then((res) => {
        try {
          if (!res.data) {
            reject(new Error("权限树数据格式错误"));
            return;
          }

          // 优先使用parentRoleRightViewGroupList构建树形结构
          // 如果parentRoleRightViewGroupList为空或null，则使用roleRightViewGroupList
          let dataForTreeBuild = [];

          if (
            res.data.parentRoleRightViewGroupList &&
            res.data.parentRoleRightViewGroupList.length > 0
          ) {
            dataForTreeBuild = res.data.parentRoleRightViewGroupList;

            // 保存到原始权限数据中
            originalRightData.value = {
              parentRoleRightViewGroupList: [...res.data.parentRoleRightViewGroupList],
              roleRightViewGroupList: res.data.roleRightViewGroupList || [],
            };
          } else if (
            res.data.roleRightViewGroupList &&
            res.data.roleRightViewGroupList.length > 0
          ) {
            dataForTreeBuild = res.data.roleRightViewGroupList;

            // 保存到原始权限数据中
            originalRightData.value = {
              parentRoleRightViewGroupList: [],
              roleRightViewGroupList: [...res.data.roleRightViewGroupList],
            };
          } else {
            reject(new Error("没有可用于构建树形结构的数据"));
            return;
          }

          // 处理数据
          dataForTreeBuild.forEach((item: any) => {
            item.label = item.groupName;
            item.value = item.accessRightDefaultId;
          });

          // 构建树
          const treeResult = buildTree(dataForTreeBuild);
          treeData.value = treeResult;

          resolve(treeData.value);
        } catch (error) {
          reject(error);
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
};
function buildTree(data: any[]) {
  // 检查是否有parentGroupId为1的情况
  const hasParentGroupId1 = data.some((item) => item.parentGroupId === 1);

  const map = new Map();
  const tree = [];

  // 创建节点映射表，过滤掉权限管理节点
  data.forEach((item) => {
    // 过滤掉权限管理节点（假设权限管理的 groupName 是"权限管理"）
    if (item.groupName === "权限管理") {
      return;
    }

    map.set(item.accessRightDefaultId, {
      ...item,
      children: [],
      permissions: { view: false, manage: false },
      viewIndeterminate: false,
      manageIndeterminate: false,
    });
  });

  // 构建树结构
  if (hasParentGroupId1) {
    // 第一步：找出所有根节点（parentGroupId为0的节点），排除权限管理节点
    const rootNodes = data.filter((item) => item.parentGroupId === 0 && item.groupName !== "权限管理");

    // 将根节点添加到树中
    rootNodes.forEach((item) => {
      const node = map.get(item.accessRightDefaultId);
      if (node) {
        tree.push(node);
      }
    });

    // 第二步：将其余节点按照父子关系添加到树中
    data.forEach((item) => {
      // 跳过权限管理节点
      if (item.groupName === "权限管理") {
        return;
      }

      if (item.parentGroupId !== 0) {
        const parent = map.get(item.parentGroupId);
        const node = map.get(item.accessRightDefaultId);
        if (parent && node) {
          parent.children.push(node);
        } else if (node) {
          // 如果找不到父节点，则作为根节点添加到树中
          tree.push(node);
        }
      }
    });
  } else {
    // 常规树构建逻辑
    data.forEach((item) => {
      // 跳过权限管理节点
      if (item.groupName === "权限管理") {
        return;
      }
      if (item.parentGroupId === 0) {
        // 根节点
        const node = map.get(item.accessRightDefaultId);
        if (node) {
          tree.push(node);
        }
      } else {
        // 子节点
        const parent = map.get(item.parentGroupId);
        const node = map.get(item.accessRightDefaultId);
        if (parent && node) {
          parent.children.push(node);
        } else if (node) {
          tree.push(node);
        }
      }
    });
  }
  return tree;
}

onMounted(() => {
  getAccessTreeData();
});

// 接收初始权限数据
const props = defineProps({
  initialPermissions: {
    type: Array,
    default: () => [],
  },
});

// 打开弹窗
const openDialog = async () => {
  try {
    // 获取权限树数据（弹窗尚未显示，不会产生闪烁）
    await getAccessTreeData();

    // 清除旧的树状态
    treeData.value.forEach((node) => {
      resetNodePermissions(node);
    });

    // 处理原始权限数据
    if (
      originalRightData.value &&
      (originalRightData.value.parentRoleRightViewGroupList ||
        originalRightData.value.roleRightViewGroupList)
    ) {
      processOriginalRightData();
    }

    // 在弹窗显示前先应用权限
    if (props.initialPermissions && props.initialPermissions.length > 0) {
      applyPermissionsToTree(props.initialPermissions);
      updateParentNodeStatus();
    }

    // 所有准备工作做完后，再显示弹窗
    dialogVisible.value = true;

    // 确保DOM更新后，可能需要再次应用权限（在v-if情况下可能需要）
    await nextTick();

    // 再次确认所有权限状态正确（这不会导致闪烁，因为值已经设置好了）
    if (props.initialPermissions && props.initialPermissions.length > 0) {
      setTimeout(() => {
        updateParentNodeStatus();
      }, 50);
    }
  } catch (error) {
    // 出错时也要显示弹窗，让用户可以操作
    dialogVisible.value = true;
  }
};



// 重置节点权限状态的递归函数
const resetNodePermissions = (node) => {
  // 重置当前节点
  node.permissions.view = false;
  node.permissions.manage = false;
  node.viewIndeterminate = false;
  node.manageIndeterminate = false;

  // 保留isViewOnly标记，不重置它
  // 因为这是基于API返回的数据确定的，不应该在重置权限时清除

  // 递归重置子节点
  if (node.children && node.children.length > 0) {
    node.children.forEach((child) => resetNodePermissions(child));

    // 检查子节点是否全部被禁用
    const allChildrenViewOnly = node.children.every((child) => child.isViewOnly);
    if (allChildrenViewOnly) {
      node.isViewOnly = true;
    }
  }
};


// 存储仅查看权限的节点ID集合
const viewOnlyNodesSet = ref(new Set());
// 将权限数据应用到树形结构
const applyPermissionsToTree = (permissions) => {
  // 先重置所有节点的isViewOnly标记
  const resetViewOnlyFlag = (node) => {
    // 检查节点ID是否在仅查看权限集合中
    const nodeId = Number(node.accessRightDefaultId);
    node.isViewOnly = viewOnlyNodesSet.value.has(nodeId);
    if (node.children && node.children.length > 0) {
      node.children.forEach((child) => resetViewOnlyFlag(child));
    }
  };
  // 设置所有节点的isViewOnly标记
  if (treeData.value && treeData.value.length > 0) {
    treeData.value.forEach((node) => resetViewOnlyFlag(node));
  }

  if (!treeData.value || treeData.value.length === 0) {
    return;
  }

  if (!permissions || !Array.isArray(permissions) || permissions.length === 0) {
    return;
  }


  //创建权限映射，便于快速查找
  const permissionMap = new Map();
  permissions.forEach((permission) => {
    // 确保权限ID是数字类型，以防字符串比较失败
    const id = Number(permission.accessRightDefaultId);

    // 支持两种格式的权限数据:
    // 1. {view: boolean, manage: boolean} 格式
    // 2. {accessType: 0|1|2} 格式 (0=无权限, 1=管理权限, 2=查看权限)
    permissionMap.set(id, {
      view:
        permission.view !== undefined ? !!permission.view : permission.accessType === 2,
      manage:
        permission.manage !== undefined
          ? !!permission.manage
          : permission.accessType === 1,
    });
  });

  // 递归处理所有树节点
  const processNode = (node) => {
    // 获取当前节点ID
    const nodeId = Number(node.accessRightDefaultId);

    // 查找该节点的权限
    const nodePermission = permissionMap.get(nodeId);

    if (nodePermission) {
      // 应用权限
      node.permissions.view = nodePermission.view;
      node.permissions.manage = nodePermission.manage;
      // 如果有isViewOnly标记，则设置到节点上
      if (nodePermission.isViewOnly !== undefined) {
        node.isViewOnly = nodePermission.isViewOnly;
      }
    }

    // 处理子节点
    if (node.children && node.children.length > 0) {
      node.children.forEach((child) => processNode(child));
    }
  };

  // 递归应用权限
  treeData.value.forEach((rootNode) => {
    processNode(rootNode);
  });

  // 更新父节点状态
  updateParentNodeStatus();
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  emits("close");
};

// 确认编辑，收集权限数据并发送给父组件
const confirmEdit = () => {
  // 收集权限数据
  const permissions = [];
  const parentNodes = new Set(); // 用于记录父节点ID

  // 首先标记所有的父节点
  const markParentNodes = (nodes) => {
    for (const node of nodes) {
      if (node.children && node.children.length > 0) {
        parentNodes.add(node.accessRightDefaultId);
        markParentNodes(node.children);
      }
    }
  };

  // 标记所有父节点
  markParentNodes(treeData.value);

  const collectPermissions = (nodes) => {
    for (const node of nodes) {
      // 只收集有权限的项目，并且不是父节点的项目
      if (
        (node.permissions.view || node.permissions.manage) &&
        !parentNodes.has(node.accessRightDefaultId)
      ) {
        // 构造权限项
        const permissionItem = {
          accessRightDefaultId: node.accessRightDefaultId,
          groupName: node.groupName,
          view: node.permissions.view,
          manage: node.permissions.manage,
          // 添加accessType属性，用于API提交
          // accessType: 0=无权限, 1=管理权限, 2=查看权限
          accessType: node.permissions.manage ? 1 : node.permissions.view ? 2 : 0,
        };

        permissions.push(permissionItem);
      }

      // 递归处理子节点
      if (node.children && node.children.length > 0) {
        collectPermissions(node.children);
      }
    }
  };

  collectPermissions(treeData.value);

  // 发送权限数据给父组件
  emits("update:permissions", permissions);

  // 关闭弹窗
  dialogVisible.value = false;
  emits("close");
};

// 记录是否已经应用过权限，避免重复应用导致的闪烁
const hasAppliedPermissions = ref(false);

// 当接收到初始权限数据时，应用到树形结构
watch(
  () => props.initialPermissions,
  (newPermissions) => {
    // 只有在弹窗打开且尚未应用过权限时才处理
    if (
      dialogVisible.value &&
      treeData.value &&
      treeData.value.length > 0 &&
      !hasAppliedPermissions.value
    ) {
      if (newPermissions && newPermissions.length > 0) {
        // 设置标记，避免重复应用
        hasAppliedPermissions.value = true;

        // 应用权限
        applyPermissionsToTree(newPermissions);
        updateParentNodeStatus();
      }
    }
  },
  { deep: true }
);

// 监听弹窗关闭，重置应用权限标记
watch(dialogVisible, (newVal) => {
  if (!newVal) {
    // 弹窗关闭时重置标记
    hasAppliedPermissions.value = false;
  }
});

// 重置所有权限选择
const resetPermissions = () => {
  // 如果树数据已加载，清除所有选择状态
  if (treeData.value && treeData.value.length > 0) {
    treeData.value.forEach((node) => {
      resetNodePermissions(node);
    });
    // 更新父节点状态
    updateParentNodeStatus();
  }
};

// 处理子节点复选框变化，影响父节点状态
const handleCheckboxChange = (data, type, value) => {
  if (value) {
    // 如果选中了一个，取消另一个
    if (type === "view") {
      data.permissions.manage = false;
    } else if (type === "manage") {
      data.permissions.view = false;
    }
  }

  // 更新父节点状态
  updateParentNodeStatus();
};

// 处理父节点复选框变化，影响所有子节点
const handleParentCheckboxChange = (data, type, value) => {
  // 先处理父节点本身的互斥
  if (value) {
    if (type === "view") {
      data.permissions.manage = false;
      data.manageIndeterminate = false;
    } else if (type === "manage") {
      data.permissions.view = false;
      data.viewIndeterminate = false;
    }
  } else {
    // 取消选中时，清除半选状态
    if (type === "view") {
      data.viewIndeterminate = false;
    } else if (type === "manage") {
      data.manageIndeterminate = false;
    }
  }

  // 检查是否所有子节点的管理权限都被禁用
  const allManageDisabled =
    data.children &&
    data.children.length > 0 &&
    data.children.every((child) => child.isViewOnly);

  // 如果所有子节点的管理权限都被禁用，且当前是管理权限操作，则不执行任何操作
  if (allManageDisabled && type === "manage") {
    // 恢复父节点状态
    updateParentNodeStatus();
    return;
  }

  // 然后处理所有子节点 - 使用nextTick异步处理避免界面抖动
  if (data.children && data.children.length > 0) {
    nextTick(() => {
      data.children.forEach((child) => {
        // 对于管理权限，如果子节点是仅查看权限（已禁用），则跳过
        if (type === "manage" && child.isViewOnly) {
          return;
        }

        // 将父节点的权限状态应用到子节点
        if (type === "view") {
          child.permissions.view = value;
          // 如果选中了查看权限，确保管理权限被取消
          if (value) {
            child.permissions.manage = false;
          }
        } else if (type === "manage") {
          child.permissions.manage = value;
          // 如果选中了管理权限，确保查看权限被取消
          if (value) {
            child.permissions.view = false;
          }
        }
      });

      updateParentNodeStatus();
    });
  } else {
    updateParentNodeStatus();
  }
};

// 更新父节点状态
const updateParentNodeStatus = () => {
  if (!treeData.value || treeData.value.length === 0) return;

  // 从叶子节点开始向上更新
  const updateNodesBottomUp = (nodes) => {
    // 先更新子节点
    for (const node of nodes) {
      if (node.children && node.children.length > 0) {
        updateNodesBottomUp(node.children);
      }
    }

    // 再更新当前层级的节点
    for (const node of nodes) {
      if (node.children && node.children.length > 0) {
        updateNodeStatus(node);
      }
    }
  };

  // 从底层开始更新，确保子节点状态先更新
  updateNodesBottomUp(treeData.value);
};

// 更新单个父节点的状态
const updateNodeStatus = (node) => {
  if (!node.children || node.children.length === 0) return;

  // 计算子节点中有多少个选中了查看权限
  const viewCheckedCount = node.children.filter((child) => child.permissions.view).length;
  // 计算子节点中有多少个选中了管理权限
  const manageCheckedCount = node.children.filter((child) => child.permissions.manage)
    .length;

  // 计算子节点中有多少个是仅查看权限（管理权限被禁用）
  const viewOnlyCount = node.children.filter((child) => child.isViewOnly).length;

  // 总子节点数量
  const totalChildCount = node.children.length;
  // 可管理的子节点数量（排除仅查看权限的节点）
  const manageableChildCount = totalChildCount - viewOnlyCount;

  // 更新查看权限状态
  if (viewCheckedCount === 0) {
    // 没有子节点选中，父节点不选中
    node.permissions.view = false;
    node.viewIndeterminate = false;
  } else if (viewCheckedCount === totalChildCount) {
    // 所有子节点都选中，父节点选中
    node.permissions.view = true;
    node.viewIndeterminate = false;
  } else {
    // 部分子节点选中，父节点半选
    node.permissions.view = false;
    node.viewIndeterminate = true;
  }

  // 更新管理权限状态
  if (manageCheckedCount === 0) {
    // 没有子节点选中，父节点不选中
    node.permissions.manage = false;
    node.manageIndeterminate = false;
  } else if (manageableChildCount > 0 && manageCheckedCount === manageableChildCount) {
    // 所有可管理的子节点都选中，父节点选中
    node.permissions.manage = true;
    node.manageIndeterminate = false;
  } else if (manageCheckedCount > 0) {
    // 部分子节点选中，父节点半选
    node.permissions.manage = false;
    node.manageIndeterminate = true;
  }

  // 如果所有子节点都是仅查看权限，则禁用父节点的管理权限选择框
  if (viewOnlyCount === totalChildCount) {
    node.isViewOnly = true;
  }
};

// 根据权限过滤节点
const filterNodesWithPermissions = (nodes, permissions) => {
  // 检查原始权限数据是否存在
  if (!originalRightData.value) {
    return nodes;
  }

  const {
    parentRoleRightViewGroupList,
    roleRightViewGroupList,
  } = originalRightData.value;

  // 优先使用parentRoleRightViewGroupList，如果为空或null则使用roleRightViewGroupList
  const dataForTreeBuild =
    parentRoleRightViewGroupList && parentRoleRightViewGroupList.length > 0
      ? parentRoleRightViewGroupList
      : roleRightViewGroupList || [];

  // 检查是否有parentGroupId为1的情况
  const hasParentGroupId1 = dataForTreeBuild.some((item) => item.parentGroupId === 1);

  // 如果parentGroupId为1，显示完整树结构
  if (hasParentGroupId1) {
    return nodes;
  }

  // 获取所有权限ID（包括父级权限和当前权限）
  const permissionIds = permissions.map((p) => p.accessRightDefaultId);
  const allPermissionIds = Array.from(
    new Set([...permissionIds, ...parentPermissionIds.value])
  );

  // 过滤节点
  return nodes.filter((node) => {
    // 如果节点ID在权限列表中，保留该节点
    if (allPermissionIds.includes(node.id)) {
      // 递归处理子节点
      if (node.children && node.children.length > 0) {
        node.children = filterNodesWithPermissions(node.children, permissions);
      }
      return true;
    }

    // 如果节点有子节点，检查子节点是否有权限
    if (node.children && node.children.length > 0) {
      const filteredChildren = filterNodesWithPermissions(node.children, permissions);

      // 如果过滤后还有子节点，保留该节点并更新子节点
      if (filteredChildren.length > 0) {
        node.children = filteredChildren;
        return true;
      }
    }

    // 没有权限，不保留该节点
    return false;
  });
};

// 添加存储原始权限数据的响应式变量
const originalRightData = ref({
  parentRoleRightViewGroupList: [],
  roleRightViewGroupList: [],
});

// 添加父级权限ID数组
const parentPermissionIds = ref([]);

// 设置原始权限数据的方法
const setOriginalRightData = (data) => {
  // 检查数据结构
  if (!data) {
    return;
  }

  // 检查parentRoleRightViewGroupList是否存在
  if (!data.parentRoleRightViewGroupList) {
  } else {
  }

  // 检查roleRightViewGroupList是否存在
  if (!data.roleRightViewGroupList) {
  } else {
  }

  // 保存数据
  originalRightData.value = data;

  // 如果弹窗已经打开，可以立即使用这些数据
  if (dialogVisible.value && data) {
    // 处理原始权限数据，例如更新树形结构等
    processOriginalRightData();
  }
};

// 处理原始权限数据的方法
const processOriginalRightData = () => {
  const {
    parentRoleRightViewGroupList,
    roleRightViewGroupList,
  } = originalRightData.value;

  // 创建一个映射，记录accessType为2的节点ID
  const viewOnlyNodeIds = new Set();

  // 优先检查parentRoleRightViewGroupList中的accessType为2的项
  if (parentRoleRightViewGroupList && parentRoleRightViewGroupList.length > 0) {
    // 如果parentRoleRightViewGroupList有数据，则使用它来确定只读权限
    parentRoleRightViewGroupList.forEach((item) => {
      if (item.accessType === 2) {
        viewOnlyNodeIds.add(Number(item.accessRightDefaultId));
      }
    });
  } else if (roleRightViewGroupList && roleRightViewGroupList.length > 0) {
    // 如果parentRoleRightViewGroupList为空或null，则使用roleRightViewGroupList
    roleRightViewGroupList.forEach((item) => {
      if (item.accessType === 2) {
        viewOnlyNodeIds.add(Number(item.accessRightDefaultId));
      }
    });
  }

  // 将viewOnlyNodeIds保存到全局变量，以便在其他地方使用
  viewOnlyNodesSet.value = viewOnlyNodeIds;

  // 优先使用parentRoleRightViewGroupList构建树形结构
  // 如果parentRoleRightViewGroupList为空或null，则使用roleRightViewGroupList
  const dataForTreeBuild =
    parentRoleRightViewGroupList && parentRoleRightViewGroupList.length > 0
      ? parentRoleRightViewGroupList
      : roleRightViewGroupList || [];

  // 如果有用于构建树的数据，可以在这里处理
  if (dataForTreeBuild.length > 0) {
    // 检查是否有parentGroupId为1的情况
    const hasParentGroupId1 = dataForTreeBuild.some((item) => item.parentGroupId === 1);

    if (hasParentGroupId1) {
      // 当parentGroupId为1时，不需要过滤权限树，显示全部节点
    } else {
      // 将数据转换为权限ID数组，用于过滤树
      const permIds = dataForTreeBuild
        .filter((item) => item.accessType === 1 || item.accessType === 2) // 只保留有权限的项
        .map((item) => Number(item.accessRightDefaultId));

      // 保存权限ID数组，用于后续过滤树
      parentPermissionIds.value = permIds;
    }
  } else {
  }

  // 如果有当前权限数据，处理当前权限
  if (roleRightViewGroupList && roleRightViewGroupList.length > 0) {
    const permissions = roleRightViewGroupList
      .filter((item) => item.accessType === 1 || item.accessType === 2) // 只保留有权限的项
      .map((item) => ({
        accessRightDefaultId: Number(item.accessRightDefaultId),
        groupName: item.groupName,
        // accessType: 1代表管理权限，2代表查看权限，0代表无权限
        view: item.accessType === 2,
        manage: item.accessType === 1,
      }));

    // 应用当前权限到树
    if (permissions.length > 0) {
      applyPermissionsToTree(permissions);
      updateParentNodeStatus();
    }
  }
};

// 对外暴露方法
defineExpose({
  openDialog,
  resetPermissions, // 添加重置权限方法
  setOriginalRightData, // 添加设置原始权限数据的方法
});
</script>

<style scoped lang="scss">
.el-tree {
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #2258F6;
    border-color: #2258F6;
  }

  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background-color: #2258F6;
    border-color: #2258F6;
  }
}

.permission-container {
  display: flex;
  flex-direction: column;
}

.permission-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 15px;
}

.permission-title {
  font-weight: bold;
  font-size: 16px;
}

.permission-options {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  margin-bottom: 15px;
  background: #f4f4f9;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  color: #02011b;
  font-weight: 500;
  font-size: 14px;
}

.option-item {
  text-align: center;
  width: 60px;
}

.tree-wrapper {
  max-height: 450px;
  overflow-y: auto;
  border-radius: 4px;
  margin-bottom: 20px;
}

:deep(.el-tree) {
  .el-tree-node__content {
    height: 40px;
  }

  .el-tree-node__children {
    .node-label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 800;
      font-size: 14px;
      color: #02011b !important;
    }
  }
}

.custom-tree-node {
  width: 100%;

  .node-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;

    .node-label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 800;
      font-size: 14px;
      color: #9f9f9f;
    }

    .node-permissions {
      display: flex;
      gap: 60px;
      margin-right: 20px;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;

  .confirm-btn {
    background-color: #f0a563;
    border-color: #f0a563;
    padding: 10px 20px;
    border-radius: 20px;
  }

  .cancel-btn {
    padding: 10px 20px;
    border-radius: 20px;
  }
}

.tree-loading {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}


.common-group-button {
  display: flex;
  justify-content: center;
}
</style>
